<template>
  <view>
    <!-- 地图显示 -->
    <view class="chart">
      <u--text margin="0 0 0 10rpx" text="地图统计" :size="18" :bold="true"></u--text>
      <!-- tooltipFormat属性为方法字符串，需要在components/qiun-data-charts/u-charts/config-uchart.js文件中配置，配置位置为cfu->formatter中 -->
      <qiun-data-charts ref="mapRef" type="map" :opts="mapOps" :chartData="mapChartData"
      tooltipFormat="mapCountFormat"></qiun-data-charts>
    </view>
      
      
    <!-- 折线图显示 -->
    <view class="chart">
      <u--text margin="0 0 0 10rpx" text="折线图统计" :size="18" :bold="true"></u--text>
      <qiun-data-charts type="line" :opts="lineOpts" :chartData="lineChartData" />
    </view>
      
    
    <!-- 柱状图显示 -->
    <view class="chart">
      <u--text margin="0 0 0 10rpx" text="柱状图统计" :size="18" :bold="true"></u--text>
      <qiun-data-charts type="column" :opts="columnOpts" :chartData="columnChartData" />
    </view>
      

    <!-- 饼状图 -->
    <view class="chart">
      <u--text margin="0 0 0 10rpx" text="饼状图统计" :size="18" :bold="true"></u--text>
      <qiun-data-charts type="pie" :opts="pieOpts" :chartData="pieChartData" />
    </view>
      

    <!-- 进度条 -->
    <view class="chart">
      <u--text margin="0 0 0 10rpx" text="进度条统计" :size="18" :bold="true"></u--text>
      <qiun-data-charts type="arcbar" :opts="arcbarOpts" :chartData="arcbarChartData" />
    </view>
      
    
   


  </view>
</template>

<script>
  import QiunDataCharts from "@/components/qiun-data-charts/qiun-data-charts/qiun-data-charts";
  // json获取地址：https://datav.aliyun.com/portal/school/atlas/area_selector
  import shandong from "@/common/shandong.json";
  export default {
    data() {
      return {
        // 地图配置
        // 配置说明地址：https://www.ucharts.cn/v2/#/document/index
        // 位置：基本配置->组件基本配置 opts.
        mapOps: {
          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
            "#ea7ccc"
          ],
          // 在地图配置中不起作用，在css的map-chart类进行设置。在其他echart中起作用，如：折线图等
          padding: [10, 0, 0, 0],
          dataLabel: true,
          enableScroll: false,
          extra: {
            // 配置说明地址：https://www.ucharts.cn/v2/#/document/index
            // 位置：扩展配置->地图
            map: {
              border: true,
              borderWidth: 2,
              borderColor: "#666666",
              fillOpacity: 0.6,
              activeBorderColor: "#000",
              activeFillColor: "#28faf3",
              activeFillOpacity: 1
            }
          }
        },
        // 地图信息数据，包含地图区域信息和对应的数量
        mapChartData: {},
        // 每个区域数量对象，key为区域名称，value为数量
        mapCountMap: {
          "临沂市": 12,
          "烟台市": 13
        },


        // 折线图配置
        // 配置说明地址：https://www.ucharts.cn/v2/#/document/index
        // 位置：基本配置->组件基本配置 opts.
        lineOpts: {
          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
          padding: [15, 10, 0, 5],
          enableScroll: false,
          // 配置说明地址：https://www.ucharts.cn/v2/#/document/index
          // 位置：图例配置
          legend: {},
          // 配置说明地址：https://www.ucharts.cn/v2/#/document/index
          // 位置：X轴配置
          xAxis: {
            disableGrid: true
          },
          // 配置说明地址：https://www.ucharts.cn/v2/#/document/index
          // 位置：Y轴配置
          yAxis: {
            gridType: "dash",
            dashLength: 2
          },
          extra: {
            // 配置说明地址：https://www.ucharts.cn/v2/#/document/index
            // 位置：扩展配置->折线图
            line: {
              type: "straight",
              width: 2,
              activeType: "hollow"
            }
          }
        },
        // 折线图数据
        // 配置说明地址：https://www.ucharts.cn/v2/#/document/index
        // 位置：数据配置
        lineChartData: {
          // x轴名称
          categories: ["2020", "2021", "2022", "2023", "2024", "2025"],
          series: [
            {
              // y轴名称（每条折线的名称）
              name: "成交量A",
              // y轴数值（每条折线的值），数据依次对应x轴名称
              data: [35, 8, 25, 37, 4, 20]
            },
            {
              name: "成交量B",
              data: [70, 40, 65, 100, 44, 68]
            },
            {
              name: "成交量C",
              data: [100, 80, 95, 150, 112, 132]
            }
          ]
        },


        // 柱状图配置
        // 配置说明地址：https://www.ucharts.cn/v2/#/document/index
        // 位置：基本配置->组件基本配置 opts.
        columnOpts: {
          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
          padding: [15, 10, 0, 15],
          enableScroll: false,
          // 配置说明地址：https://www.ucharts.cn/v2/#/document/index
          // 位置：图例配置
          legend: {},
          // 配置说明地址：https://www.ucharts.cn/v2/#/document/index
          // 位置：X轴配置
          xAxis: {
            disableGrid: true
          },
          // 配置说明地址：https://www.ucharts.cn/v2/#/document/index
          // 位置：Y轴配置
          yAxis: {
            data: [
              {
                min: 0
              }
            ]
          },
          extra: {
            // 配置说明地址：https://www.ucharts.cn/v2/#/document/index
            // 位置：扩展配置->柱状图
            column: {
              type: "group",
              width: 20,
              activeBgColor: "#000000",
              activeBgOpacity: 0.08
            }
          }
        },
        // 柱状图数据
        // 配置说明地址：https://www.ucharts.cn/v2/#/document/index
        // 位置：数据配置
        columnChartData: {
          // x轴名称
          categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
          series: [
            {
              // y轴名称（数据柱的名称）
              name: "目标值",
              // y轴数值（每个数据柱的值），数据依次对应x轴名称
              data: [35, 36, 31, 33, 13, 34]
            },
            {
              name: "完成量",
              data: [18, 27, 21, 24, 6, 28]
            }
          ]
        },


        // 饼状图配置
        // 配置说明地址：https://www.ucharts.cn/v2/#/document/index
        // 位置：基本配置->组件基本配置 opts.
        pieOpts: {
          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
          padding: [5, 5, 5, 5],
          enableScroll: false,
          extra: {
            // 配置说明地址：https://www.ucharts.cn/v2/#/document/index
            // 位置：扩展配置->饼状图
            pie: {
              activeOpacity: 0.5,
              activeRadius: 10,
              offsetAngle: 0,
              labelWidth: 15,
              border: false,
              borderWidth: 3,
              borderColor: "#FFFFFF"
            }
          }
        },
        // 柱状图数据
        // 配置说明地址：https://www.ucharts.cn/v2/#/document/index
        // 位置：数据配置
        pieChartData: {
          series: [
            {
              data: [
                // name：名称，value：值
                { "name": "一班", "value": 50 },
                { "name": "二班", "value": 30 },
                { "name": "三班", "value": 20 },
                { "name": "四班", "value": 18 },
                { "name": "五班", "value": 8 }
              ]
            }
          ]
        },


        // 进度条配置
        // 配置说明地址：https://www.ucharts.cn/v2/#/document/index
        // 位置：基本配置->组件基本配置 opts.
        arcbarOpts: {
          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
          padding: undefined,
          title: {
            // 不需要设置，会通过setArcbarTitle方法，与完成进度绑定
            name: "",
            fontSize: 35,
            color: "#2fc25b"
          },
          subtitle: {
            // 副标题
            name: "完成率",
            fontSize: 25,
            color: "#666666"
          },
          extra: {
            arcbar: {
              type: "default",
              width: 12,
              backgroundColor: "#E9E9E9",
              startAngle: 0.75,
              endAngle: 0.25,
              gap: 2,
              linearType: "custom"
            }
          }
        },
        // 进度条数据
        // 配置说明地址：https://www.ucharts.cn/v2/#/document/index
        // 位置：数据配置
        arcbarChartData: {
          series: [
            {
              name: "完成率",
              color: "#2fc25b",
              data: 0.8
            }
          ]
        }
      }
    },
    components: { QiunDataCharts },
    onLoad: function () {
      // 获取地图json数据，并且将区域数量保存
      this.getMapChartData();

      // 将进度条标题名称和完成进度绑定
      this.setArcbarTitle();
    },
    methods: {
      // 获取地图json数据，并且将区域数量保存
      getMapChartData() {
        let features = shandong.features;
        let mapCountMap = this.mapCountMap;
        features.forEach(feature => {
          let name = feature.properties && feature.properties.name;
          if (name && Object.hasOwnProperty.call(mapCountMap, name)) {
            feature["count"] = mapCountMap[name];
          }
        });
        this.mapChartData = {
          series: features
        }
      },

      // 将进度条标题名称和完成进度绑定
      setArcbarTitle() {
        let data = this.arcbarChartData && this.arcbarChartData.series && this.arcbarChartData.series[0] && this.arcbarChartData.series[0].data;
        if (data) {
          this.arcbarOpts.title.name = data * 100 + "%";
        }
      }
    },

  }
</script>

<style scoped>
  /* .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  } */
  /* .map-chart{
    margin: 10rpx 10rpx 0 10rpx;
    width: calc(100vw - 20rpx);
    border-radius: 5px;
    background-color: #ecf5ff;
  } */

  .chart {
    margin: 20rpx 10rpx 0 10rpx;
    border-radius: 5px;
    width: calc(100vw - 20rpx);
    background-color: #a0cfff;
  } 

  .chart-title {
    margin-left: 10rpx;
  }


  
</style>